<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核酸/常住信息比对</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./static/elementui.css">
</head>
<body>
    <div id="app">
        <el-row type="flex" justify="center">
            <el-col :span="3"></el-col>
            <el-col :span="18">
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="4" @click="changeTab(4)">核酸检验库（扫码）</el-menu-item>
                    <el-menu-item index="1" @click="changeTab(1)">核酸检验库（表格）</el-menu-item>
                    <el-menu-item index="2" @click="changeTab(2)">常住人口库</el-menu-item>
                    <el-menu-item index="3">核酸/常住信息比对</el-menu-item>
                    <el-menu-item index="5" @click="changeTab(5)">配置</el-menu-item>
                </el-menu>

                <el-row style="padding-top:10px;">
                    <!-- <el-button icon="el-icon-refresh" @click="refresh"></el-button> -->
                    <el-button type="info" plain @click="checkRepeat" v-loading="loadingCheckRepeat">筛查</el-button>
                    <div style="display: inline-block;padding: 0 8px;">
                        <el-radio v-model="sourceType" label="0">表格</el-radio>
                        <el-radio v-model="sourceType" label="1">扫码</el-radio>
                    </div>

                    <el-tag v-if="typec == 1">核酸检测数({{count_nat}}次) > 常住人口数({{count_pop}}人)</el-tag>
                    <el-tag v-else-if="typec == 2" type="warning">核酸检测数({{count_nat}}次) < 常住人口数({{count_pop}}人)</el-tag>
                    <el-tag v-else-if="typec == 3" type="success">核酸检测数({{count_nat}}次) = 常住人口数({{count_pop}}人)</el-tag>
                    <span v-else></span>

                    <div style="display: inline-block;position: absolute;right: 0;">
                        <el-radio v-model="exportType" label="0">单文件</el-radio>
                        <el-radio v-model="exportType" label="1">按乡镇</el-radio>
                        <el-button type="primary" plain @click="exportData" v-loading="exportLoading">导出</el-button>
                    </div>
                </el-row>

                <el-table v-loading="loadingTable" ref="multipleTable" empty-text="没有数据" :data="tableData" border stripe style="width: 100%;margin-top:20px;">
                    <el-table-column prop="town" label="所属乡镇" width="120"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                    <el-table-column prop="card" label="证件号码" width="200"></el-table-column>
                    <el-table-column prop="link" label="联系方式" width="300"></el-table-column>
                    <el-table-column prop="addr" label="常住地址"></el-table-column>
                </el-table>
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="page"
                    :page-size="10" background 
                    layout="total, prev, pager, next"
                    :total="count" style="padding-top:10px;float:right;">
                </el-pagination>
            </el-col>
            <el-col :span="3"></el-col>
        </el-row>
    </div>

     <!-- import Vue before Element -->
     <script src="./static/vue.min.js"></script>
     <!-- import JavaScript -->
     <script src="./static/elementui.js"></script>
     <!-- import axios -->
     <script src="./static/axios.min.js"></script>
     <!-- import cookie -->
     <script src="./static/js.cookie.min.js"></script>
    <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
                activeIndex2: '3',

                tableData: [],
                multipleSelection: [],

                sourceType: '0',
                exportType: '0',

                page: 1,
                type: 'all',
                count: 0,
                typec: 0,

                count_pop: 0,
                count_nat: 0,

                exportLoading: false,
                loadingCheckRepeat: false,
                loadingTable: false
            }
          },
          created() {
              console.log('login', Cookies.get('login'))
              if(Cookies.get('login') != 'true') {
                  window.location.href = './login.html'
              } else {
                // this.getList()
              }
          },
          methods: {
              changeTab(type) {
                  console.log(type);
                  if(type == 2) {
                    window.location.href = "./pop.html"
                  } else if(type == 4) {
                    window.location.href = "./code.html"
                  } else if(type == 3) {
                    window.location.href = "./compare.html"
                  } else if(type == 5) {
                    window.location.href = "./setting.html"
                  } else {
                    window.location.href = "./index.html"
                  }
              },
              exportData() {
                this.exportLoading = true
                axios.get('/export_excel', {
                    params: {
                        exportType: this.exportType,
                        sourceType: this.sourceType
                    }
                }).then((res) => {
                    this.exportLoading = false
                    console.log(res.data)
                    if(res.data.code == 1) {
                        window.location.href = res.data.url
                    } else {
                        this.$message(res.data.msg)
                    }
                })
              },
              handleCurrentChange(e) {
                  console.log(e)
                  this.getList()
              },
              handleSelect(key, keyPath) {
                  console.log(key, keyPath)
              },
              handleSelectionChange(val) {
                  this.multipleSelection = val
              },
              refresh() {
                  this.type = 'all'
                  this.page = 1
                  this.getList()
              },
              getList() {
                this.loadingTable = true
                axios.get('/check_data', {
                    params: {
                        type: this.type,
                        page: this.page,
                        sourceType: this.sourceType
                    }
                }).then((res) => {
                    this.loadingTable = false
                    this.loadingCheckRepeat = false
                    console.log(res)
                    let data = res.data
                    if(data.code == 1) {
                        this.tableData = data.list
                        this.count = data.count
                        this.typec = data.type

                        this.count_nat = data.count_nat
                        this.count_pop = data.count_pop
                    }
                })
              },
              checkRepeat() {
                  this.loadingCheckRepeat = true
                  this.type = 'repeat'
                  this.getList()
              },
              uploadSuccess(res) {
                  this.$message({message: '导入成功！', type: 'success'})
                  this.refresh()
              },
              delRow() {
                  let list = this.multipleSelection
                  console.log(this.multipleSelection)
                  if(list.length > 0) {
                      let dels = '0'
                      list.forEach(e => {
                          dels += ',' + e.id
                      })

                      axios.get('/delete', {
                        params: {
                            dels: dels
                        }
                      }).then((res) => {
                        let data = res.data
                        if(data.code == 1) {
                            this.$message('删除成功！')
                            this.getList()
                        } else {
                            this.$message('删除失败！')
                        }
                      })

                      console.log(dels)
                  } else {
                    this.$message({message: '没有勾选删除行！', type: 'warning'})
                  }
              },
              changePage(type) {
                  if(type == 'up') {
                      if(this.page > 2) {
                          this.page--
                      }
                  } else {
                      this.page++
                  }
                  this.getList()
              },
          },
        })
    </script>
</body>
</html>